
// subclass, using ES6
// https://stackoverflow.com/questions/39117168/how-to-properly-subclass-a-subclass-in-javascript

// advanced animation (not ES6, need to change to class)
// https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Advanced_animations


const canvas = document.getElementById('canvas');
canvas.style.background = 'grey';
const ctx = canvas.getContext('2d');

const ball = {
    x: 100, 
    y: 100,
    vx: -1,
    vy: 2,
    radius: 25,
    color: 'blue',
    draw() {
        ctx.beginPath();
        ctx.arc(this.x, this.y, this.radius, 0, Math.PI*2, true);
        ctx.closePath();
        ctx.fillStyle = this.color;
        ctx.fill();
    },
};

function draw() {
    ctx.clearRect(0, 0, canvas.clientWidth, canvas.height);
    ball.draw();
    ball.x += ball.vx;
    ball.y += ball.vy;

    // boundary check and reverse velocity
    if (
        ball.y + ball.vy > canvas.height - ball.radius ||
        ball.y + ball.vy < ball.radius
    ) {
        ball.vy = -ball.vy;
    }

    if (
        ball.x + ball.vx > canvas.width - ball.radius ||
        ball.x + ball.vx < ball.radius
    ) {
        ball.vx = -ball.vx;
    }


    raf = window.requestAnimationFrame(draw);
}

canvas.addEventListener('mouseover', (e) => {
    raf = window.requestAnimationFrame(draw);
});

canvas.addEventListener('mouseout', (e) => {
    window.cancelAnimationFrame(raf);
});

ball.draw();